<template>
  <div class="chat-container">

    <!-- 消息区域 -->
    <div class="chat-messages" ref="messagesContainer">
      <!-- 空状态 -->
      <div v-if="messages.length === 0" class="empty-state"></div>

      <div 
        v-for="message in messages" 
        :key="message.id"
        :class="['message', message.type]"
      >
        <div class="message-avatar">
          <svg v-if="message.type === 'bot'" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7A1,1 0 0,0 14,8H16A1,1 0 0,0 17,7V6A1,1 0 0,0 16,5V4.27C17.6,3.97 18.6,2.66 18.3,1.06C17.97,-0.34 16.76,-1.34 15.26,-1.34C13.76,-1.34 12.56,-0.34 12.23,1.06C11.93,2.66 12.93,3.97 14.53,4.27V5H9.5V4.27C11.1,3.97 12.1,2.66 11.8,1.06C11.47,-0.34 10.26,-1.34 8.76,-1.34C7.26,-1.34 6.06,-0.34 5.73,1.06C5.43,2.66 6.43,3.97 8.03,4.27V5A1,1 0 0,0 7,6V7A1,1 0 0,0 8,8H10A1,1 0 0,0 11,7V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M12,9A5,5 0 0,1 17,14A5,5 0 0,1 12,19A5,5 0 0,1 7,14A5,5 0 0,1 12,9Z" />
          </svg>
          <svg v-else viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
          </svg>
        </div>
        <div class="message-content">
          <div class="message-bubble">
            {{ message.content }}
          </div>
          <div class="message-time">
            {{ formatTime(message.timestamp) }}
          </div>
        </div>
      </div>

      <!-- 正在输入指示器 -->
      <div v-if="isTyping" class="message bot typing-indicator">
        <div class="message-avatar">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7A1,1 0 0,0 14,8H16A1,1 0 0,0 17,7V6A1,1 0 0,0 16,5V4.27C17.6,3.97 18.6,2.66 18.3,1.06C17.97,-0.34 16.76,-1.34 15.26,-1.34C13.76,-1.34 12.56,-0.34 12.23,1.06C11.93,2.66 12.93,3.97 14.53,4.27V5H9.5V4.27C11.1,3.97 12.1,2.66 11.8,1.06C11.47,-0.34 10.26,-1.34 8.76,-1.34C7.26,-1.34 6.06,-0.34 5.73,1.06C5.43,2.66 6.43,3.97 8.03,4.27V5A1,1 0 0,0 7,6V7A1,1 0 0,0 8,8H10A1,1 0 0,0 11,7V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M12,9A5,5 0 0,1 17,14A5,5 0 0,1 12,19A5,5 0 0,1 7,14A5,5 0 0,1 12,9Z" />
          </svg>
        </div>
        <div class="message-content">
          <div class="typing-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 简洁输入区域 -->
    <div class="chat-input">
      <div class="input-container">
        <div class="input-wrapper">
          <div class="input-box">
            <svg class="search-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
            </svg>
            <textarea
              ref="textareaRef"
              v-model="inputMessage"
              class="chat-textarea"
              placeholder="有什么我能帮你的吗？"
              @keydown.enter.prevent="sendMessage"
              @input="adjustTextareaHeight"
            ></textarea>
            <button class="voice-btn" title="语音输入">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
              </svg>
            </button>
            <button 
              class="send-btn" 
              @click="sendMessage" 
              :disabled="!inputMessage.trim() || isLoading"
            >
              <div v-if="isLoading" class="loading-spinner"></div>
              <svg v-else viewBox="0 0 24 24" fill="currentColor">
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import { MES_imesApi } from '@/utils/Interceptors'

interface Message {
  id: string
  type: 'user' | 'bot'
  content: string
  timestamp: Date
}

const messages = ref<Message[]>([])
const inputMessage = ref('')
const isLoading = ref(false)
const isTyping = ref(false)
const messagesContainer = ref<HTMLElement>()
const textareaRef = ref<HTMLTextAreaElement>()



// 快捷发送消息
const sendQuickReply = (message: string) => {
  inputMessage.value = message
  sendMessage()
}

// 切换设置
const toggleSettings = () => {
  // 可以添加设置面板功能
  console.log('设置功能')
}

// 发送消息
const sendMessage = async () => {
  const message = inputMessage.value.trim()
  if (!message || isLoading.value) return

  // 添加用户消息
  const userMessage: Message = {
    id: Date.now().toString(),
    type: 'user',
    content: message,
    timestamp: new Date()
  }
  messages.value.push(userMessage)
  inputMessage.value = ''

  // 滚动到底部
  await nextTick()
  scrollToBottom()

  // 发送到API
  await sendToAPI(message)
}

// 模拟智能回复
const getSmartReply = (message: string): string => {
  const msg = message.toLowerCase()
  
  // 常见问题回复
  if (msg.includes('你好') || msg.includes('hello') || msg.includes('hi')) {
    return '您好！我是智能客服助手，很高兴为您服务！有什么问题需要帮助吗？'
  }
  
  if (msg.includes('帮助') || msg.includes('help')) {
    return '我可以帮助您解决以下问题：\n• 产品咨询\n• 技术支持\n• 订单查询\n• 售后服务\n请告诉我您需要什么帮助！'
  }
  
  if (msg.includes('产品') || msg.includes('功能')) {
    return '我们的MES生产系统具有以下核心功能：\n• 生产计划管理\n• 工单跟踪\n• 质量控制\n• 设备监控\n• 数据分析\n您想了解哪个方面的详细信息？'
  }
  
  if (msg.includes('价格') || msg.includes('费用') || msg.includes('成本')) {
    return '关于产品价格，我建议您联系我们的销售团队获取详细报价。不同的配置和需求会有不同的价格方案。您可以提供具体需求，我来为您推荐合适的方案。'
  }
  
  if (msg.includes('联系') || msg.includes('电话') || msg.includes('邮箱')) {
    return '您可以通过以下方式联系我们：\n• 客服热线：400-123-4567\n• 邮箱：support@company.com\n• 工作时间：周一至周五 9:00-18:00\n• 在线客服：24小时为您服务'
  }
  
  if (msg.includes('谢谢') || msg.includes('感谢')) {
    return '不客气！很高兴能帮助到您。如果还有其他问题，随时可以问我哦！'
  }
  
  if (msg.includes('再见') || msg.includes('拜拜')) {
    return '再见！祝您工作顺利！如果以后有任何问题，欢迎随时回来咨询。'
  }
  
  // 默认回复
  const defaultReplies = [
    '我理解您的问题，让我为您查找相关信息...',
    '这是一个很好的问题！根据我的了解...',
    '感谢您的咨询，关于这个问题，我建议...',
    '我来帮您分析一下这个情况...',
    '根据您的描述，我认为可能的解决方案是...'
  ]
  
  return defaultReplies[Math.floor(Math.random() * defaultReplies.length)] + 
         '\n\n如果需要更详细的帮助，请联系我们的专业客服团队。'
}

// 发送到API接口
const sendToAPI = async (message: string) => {
  isLoading.value = true
  isTyping.value = true

  try {
    console.log('开始发送聊天消息，API地址:', MES_imesApi.defaults.baseURL + '/api/Chat/message')
    
    const response = await MES_imesApi.post('/api/Chat/message', {
      message: message,
      userId: sessionStorage.getItem('id')
    })
    
    console.log('聊天API响应:', response)

    // 模拟打字效果延迟
    setTimeout(() => {
      isTyping.value = false
      
      let replyContent = '抱歉，我暂时无法理解您的问题，请稍后再试。'
      
      // 解析真实API响应格式
      if (response.data) {
        if (response.data.code === 200 && response.data.data && response.data.data.reply) {
          replyContent = response.data.data.reply
        } else if (response.data.data && typeof response.data.data === 'string') {
          replyContent = response.data.data
        } else if (typeof response.data === 'string') {
          replyContent = response.data
        } else if (response.data.reply) {
          replyContent = response.data.reply
        }
      }
      
      const botMessage: Message = {
        id: Date.now().toString(),
        type: 'bot',
        content: replyContent,
        timestamp: new Date()
      }
      messages.value.push(botMessage)
      
      nextTick(() => {
        scrollToBottom()
      })
    }, 1000)
  } catch (error: any) {
    console.log('API不可用，使用模拟回复:', error)
    console.error('聊天API错误详情:', error.response?.data || error.response || error)
    
    // API不可用时使用模拟回复
    setTimeout(() => {
      isTyping.value = false
      
      const botMessage: Message = {
        id: Date.now().toString(),
        type: 'bot',
        content: getSmartReply(message),
        timestamp: new Date()
      }
      messages.value.push(botMessage)
      
      nextTick(() => {
        scrollToBottom()
      })
    }, 1500) // 稍长的延迟模拟真实API响应时间
  } finally {
    isLoading.value = false
  }
}

// 处理回车键
const handleEnter = (event: KeyboardEvent) => {
  if (event.shiftKey) {
    // Shift+Enter 换行
    return
  }
  sendMessage()
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 清空聊天
const clearChat = () => {
  messages.value = []
}

// 格式化时间
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 自动调整textarea高度
const adjustTextareaHeight = () => {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
  }
}

onMounted(() => {
  // 监听输入框变化
  if (textareaRef.value) {
    textareaRef.value.addEventListener('input', adjustTextareaHeight)
  }
})
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chat-header {
  position: relative;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.95;
}

.header-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  color: white;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.avatar-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.avatar svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #4caf50;
  border-radius: 50%;
  border: 3px solid white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.info-text h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.status-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

.status-text {
  font-size: 13px;
  opacity: 0.9;
  font-weight: 500;
}

.subtitle {
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
  font-weight: 400;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-btn svg {
  width: 20px;
  height: 20px;
}


.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8f9fa;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.empty-state {
  /* 空状态不需要任何样式，保持简洁 */
}

/* 欢迎页面样式 */
.welcome-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 0;
}

.welcome-header {
  text-align: center;
  padding: 0 20px;
}

.welcome-avatar {
  margin: 0 auto 24px;
  position: relative;
  width: 120px;
  height: 120px;
}

.avatar-glow {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.avatar-glow::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse-glow 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.1; }
}

.avatar-glow svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.welcome-header h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-header p {
  margin: 0;
  font-size: 16px;
  color: #7f8c8d;
  line-height: 1.6;
}

/* 功能卡片 */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 0 20px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.card-icon {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
}

.feature-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.feature-card p {
  margin: 0;
  font-size: 13px;
  color: #7f8c8d;
  line-height: 1.4;
}

/* 常见问题 */
.faq-section {
  padding: 0 20px;
}

.faq-section h3 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.faq-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.faq-item span:last-child {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.message {
  display: flex;
  gap: 12px;
  max-width: 75%;
  margin-bottom: 20px;
  animation: messageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
  margin-left: auto;
}

.message.bot {
  align-self: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.message-avatar:hover {
  transform: scale(1.05);
}

.message.bot .message-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.message.user .message-avatar {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.message-avatar.user {
  background: #10b981;
}

.message-avatar svg {
  width: 16px;
  height: 16px;
}

.message-content {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.message-text {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  word-wrap: break-word;
}

.message-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  text-align: right;
}

.message.user .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble {
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  max-width: 100%;
  transition: all 0.2s ease;
}

.message.bot .message-bubble {
  background: white;
  color: #2d3748;
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.message.bot .message-bubble:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.message.user .message-bubble {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 2px 12px rgba(79, 172, 254, 0.3);
}

.message.user .message-bubble:hover {
  box-shadow: 0 4px 20px rgba(79, 172, 254, 0.4);
  transform: translateY(-1px);
}

.message-time {
  font-size: 11px;
  color: #9ca3af;
  padding: 4px 8px 0;
  font-weight: 500;
  opacity: 0.8;
}

.message.user .message-time {
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.typing-indicator .message-content {
  align-items: flex-start;
}

.typing-dots {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: white;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

.chat-input {
  padding: 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
}

.input-container {
  width: 100%;
  max-width: 800px;
}

.input-wrapper {
  position: relative;
}

.input-box {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 12px 16px;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.input-box:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-icon {
  width: 20px;
  height: 20px;
  color: #9ca3af;
  flex-shrink: 0;
}

.chat-textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  font-family: inherit;
}

.chat-textarea::placeholder {
  color: #9ca3af;
}

.voice-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.voice-btn:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.voice-btn svg {
  width: 18px;
  height: 18px;
}

.send-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #6366f1;
  color: white;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
  background: #5856eb;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-btn svg {
  width: 16px;
  height: 16px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-container {
    height: 100vh;
    border-radius: 0;
  }
  
  .message {
    max-width: 90%;
  }
  
  .chat-header {
    padding: 12px 16px;
  }
  
  .chat-messages {
    padding: 16px;
  }
  
  .chat-input {
    padding: 12px 16px;
  }
}
</style>